<template>
  <div class="wide">
    <h3 align="center">广州市景天通信技术有限公司入职登记表</h3>

    <table width="900px" align="center">
      <tr>
        <td width="80px">入职部门：</td>
        <td width="200px">
          <input v-model="emp.p_department">
        </td>
        <td width="80px" style="text-align:right">岗位：</td>
        <td width="200px">
          <input v-model="emp.p_post">
        </td>
        <td width="100px" style="text-align:right">填表日期：</td>
        <td>
          <input v-model="emp.p_date">
        </td>
      </tr>
    </table>
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="1000px">
      <tr align="center">
        <td bgcolor="aqua">姓名</td>
        <td width="100px">
          <input size="10" v-model="emp.p_name">
        </td>
        <td bgcolor="aqua">性别</td>
        <td width="100px">
          <input size="10" v-model="emp.p_gender">
        </td>
        <td bgcolor="aqua">年龄</td>
        <td width="100px">
          <input size="10" v-model="emp.p_age">
        </td>
        <td bgcolor="aqua" width="100px">婚否</td>
        <td width="100px">
          <input size="10" v-model="emp.p_marry">
        </td>
        <td rowspan="4" width="150px">
          <div class="img-main">
            <div class="img-box" v-if="true">
              <div
                class="img-thumbnail thumbnail"
                :style="{backgroundImage: 'url(' + file + ')' }"
              >+</div>
              <input ref="upload" @change="upload" class="input-img" type="file" accept="image/*">
            </div>
          </div>
        </td>
      </tr>
      <tr align="center">
        <td bgcolor="aqua">籍贯</td>
        <td>
          <input size="10" v-model="emp.p_native_place">
        </td>
        <td bgcolor="aqua">民族</td>
        <td>
          <input size="10" v-model="emp.p_nationality">
        </td>
        <td bgcolor="aqua">政治面貌</td>
        <td>
          <input size="10" v-model="emp.p_politics_status">
        </td>
        <td bgcolor="aqua">学历</td>
        <td>
          <input size="10" v-model="emp.p_education">
        </td>
      </tr>
      <tr align="center">
        <td bgcolor="aqua">身份证号码</td>
        <td colspan="3">
          <input size="35" v-model="emp.p_ID_card">
        </td>
        <td bgcolor="aqua" colspan="2">联系电话</td>
        <td colspan="2">
          <input size="25" v-model="emp.p_phone">
        </td>
      </tr>
      <tr align="center">
        <td bgcolor="aqua">紧急联系人</td>
        <td colspan="3">
          <input size="35" v-model="emp.p_emergency_contact  ">
        </td>
        <td bgcolor="aqua" colspan="2">紧急联系人电话</td>
        <td colspan="2">
          <input size="25" v-model="emp.p_emergency_contact_phone">
        </td>
      </tr>
      <tr align="center">
        <td bgcolor="aqua">户口所在地</td>
        <td colspan="3">
          <input size="35" v-model="emp.p_domicile_place">
        </td>
        <td bgcolor="aqua" colspan="2">现居住地址</td>
        <td colspan="3">
          <input size="50" v-model="emp.p_residential_address">
        </td>
      </tr>
      <tr align="center">
        <td bgcolor="aqua" rowspan="4">工作经验</td>
        <td bgcolor="aqua" colspan="2">起止年月</td>
        <td bgcolor="aqua" colspan="4">工作单位</td>
        <td bgcolor="aqua" colspan="2">职位</td>
      </tr>
      <tr align="center">
        <td colspan="2">
          <input style="height:10px;width: 130px" v-model="emp.p_work_period1">
        </td>
        <td colspan="4">
          <input style="height:10px;width: 360px" v-model="emp.p_work_unit1">
        </td>
        <td colspan="2">
          <input style="height:10px;width: 230px" v-model="emp.p_position1">
        </td>
      </tr>
      <tr align="center">
        <td colspan="2">
          <input style="height:10px;width: 130px" v-model="emp.p_work_period2">
        </td>
        <td colspan="4">
          <input style="height:10px;width: 360px" v-model="emp.p_work_unit2">
        </td>
        <td colspan="2">
          <input style="height:10px;width: 230px" v-model="emp.p_position2">
        </td>
      </tr>
      <tr align="center">
        <td colspan="2">
          <input style="height:10px;width: 130px" v-model="emp.p_work_period3">
        </td>
        <td colspan="4">
          <input style="height:10px;width: 360px" v-model="emp.p_work_unit3">
        </td>
        <td colspan="2">
          <input style="height:10px;width: 230px" v-model="emp.p_position3">
        </td>
      </tr>
      <tr align="center">
        <td bgcolor="aqua" rowspan="4">教育培训经历</td>
        <td bgcolor="aqua" colspan="2">起止年月</td>
        <td bgcolor="aqua" colspan="2">教育培训机构</td>
        <td bgcolor="aqua" colspan="2">专业</td>
        <td bgcolor="aqua">外语程度</td>
        <td bgcolor="aqua">证书</td>
      </tr>
      <tr align="center">
        <td colspan="2">
          <input style="height:10px;width: 130px" v-model="emp.p_education_period1">
        </td>
        <td colspan="2">
          <input style="height:10px;width: 160px" v-model="emp.p_birthlight_trust1">
        </td>
        <td colspan="2">
          <input style="height:10px;width: 180px" v-model="emp.p_education_specialty1">
        </td>
        <td>
          <input style="height:10px;width: 80px" v-model="emp.p_education_foreign1">
        </td>
        <td>
          <input style="height:10px;width: 130px" v-model="emp.p_education_certificate1">
        </td>
      </tr>
      <tr align="center">
        <td colspan="2">
          <input style="height:10px;width: 130px" v-model="emp.p_education_period2">
        </td>
        <td colspan="2">
          <input style="height:10px;width: 160px" v-model="emp.p_birthlight_trust2">
        </td>
        <td colspan="2">
          <input style="height:10px;width: 180px" v-model="emp.p_education_specialty2">
        </td>
        <td>
          <input style="height:10px;width: 80px" v-model="emp.p_education_foreign2">
        </td>
        <td>
          <input style="height:10px;width: 130px" v-model="emp.p_education_certificate2">
        </td>
      </tr>
      <tr align="center">
        <td colspan="2">
          <input style="height:10px;width: 130px" v-model="emp.p_education_period3">
        </td>
        <td colspan="2">
          <input style="height:10px;width: 160px" v-model="emp.p_birthlight_trust3">
        </td>
        <td colspan="2">
          <input style="height:10px;width: 180px" v-model="emp.p_education_specialty3">
        </td>
        <td>
          <input style="height:10px;width: 80px" v-model="emp.p_education_foreign3">
        </td>
        <td>
          <input style="height:10px;width: 130px" v-model="emp.p_education_certificate3">
        </td>
      </tr>
      <tr align="center">
        <td bgcolor="aqua" rowspan="4">家庭成员</td>
        <td bgcolor="aqua" colspan="2">姓名</td>
        <td bgcolor="aqua" colspan="2">工作单位</td>
        <td bgcolor="aqua" colspan="2">职务</td>
        <td bgcolor="aqua" colspan="2">电话</td>
      </tr>
      <tr align="center">
        <td colspan="2">
          <input style="height:10px;width: 130px" v-model="emp.p_family_name1">
        </td>
        <td colspan="2">
          <input style="height:10px;width: 160px" v-model="emp.p_family_unit1">
        </td>
        <td colspan="2">
          <input style="height:10px;width: 180px" v-model="emp.p_family_job1">
        </td>
        <td colspan="2">
          <input style="height:10px;width: 230px" v-model="emp.p_family_phone1">
        </td>
      </tr>
      <tr align="center">
        <td colspan="2">
          <input style="height:10px;width: 130px" v-model="emp.p_family_name2">
        </td>
        <td colspan="2">
          <input style="height:10px;width: 160px" v-model="emp.p_family_unit2">
        </td>
        <td colspan="2">
          <input style="height:10px;width: 180px" v-model="emp.p_family_job2">
        </td>
        <td colspan="2">
          <input style="height:10px;width: 230px" v-model="emp.p_family_phone2">
        </td>
      </tr>
      <tr align="center">
        <td colspan="2">
          <input style="height:10px;width: 130px" v-model="emp.p_family_name3">
        </td>
        <td colspan="2">
          <input style="height:10px;width: 160px" v-model="emp.p_family_unit3">
        </td>
        <td colspan="2">
          <input style="height:10px;width: 180px" v-model="emp.p_family_job3">
        </td>
        <td colspan="2">
          <input style="height:10px;width: 230px" v-model="emp.p_family_phone3">
        </td>
      </tr>
      <tr>
        <td rowspan="4" bgcolor="aqua" align="center">填表人申明</td>
        <td colspan="9">1. 本人保证所填写资料属实</td>
      </tr>
      <tr>
        <td colspan="9">2. 保证遵守公司各项规章制度</td>
      </tr>
      <tr>
        <td colspan="9">3. 本人承诺保证所填写内容及提供证书证件真实有效，并自愿为此承担任何法律责任。</td>
      </tr>
      <tr>
        <td colspan="4">&nbsp;</td>
        <td colspan="2" align="right">申明人：</td>
        <td colspan="2">
          <input size="30" v-model="emp.p_affirms">
        </td>
      </tr>
      <tr>
        <td rowspan="2" bgcolor="aqua" align="center">入职培训</td>
        <td colspan="9">本人已接受公司岗前及员工规章制度的培训。</td>
      </tr>
      <tr>
        <td colspan="3">&nbsp;</td>
        <td colspan="2" align="right">员工签字：</td>
        <td>
          <input size="8" v-model="emp.p_employee_signature">
        </td>
        <td colspan="1" align="center">签字日期</td>
        <td>
          <input size="15" v-model="emp.p_signing_date">
        </td>
      </tr>
      <tr>
        <td colspan="10" align="center">
          <h4>以下为公司填写</h4>
        </td>
      </tr>
      <tr>
        <td bgcolor="aqua">入职时间</td>
        <td colspan="2">&nbsp;</td>
        <td bgcolor="aqua">所属部门</td>
        <td colspan="2">&nbsp;</td>
        <td bgcolor="aqua">职务</td>
        <td colspan="2">&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="aqua">试用时间</td>
        <td colspan="2">&nbsp;</td>
        <td bgcolor="aqua">试用期工资</td>
        <td colspan="2">&nbsp;</td>
        <td bgcolor="aqua">转正后工资</td>
        <td colspan="2">&nbsp;</td>
      </tr>
      <tr height="100px" valign="top">
        <td colspan="3">行政部经理意见：</td>
        <td colspan="3">副总经理意见：</td>
        <td colspan="3">总经理意见：</td>
      </tr>
    </table>
    <div class="footer">
            <a class="active" @click="save">提交</a>
        </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      emp: {},
      file: '',
   
    };
  },
  mounted() {},

  methods: {
    //保持数据
    save(){
                
                
                this.$post("/anapp/EmpController/addOne", this.emp, (data) => {
                    
                    // this.goBack()
                })
            },
    //  将文件流转化为url
    getUrl(file) {
      return file ? URL.createObjectURL(file) : null;
    },
    //  上传图片
    upload(e) {
      var that = this;
	  const file = e.target.files[0];
      canvasDataURL(this.getUrl(file), {}, (baseUrl) => {
        this.file = baseUrl;
        this.emp.savePath = baseUrl;
        console.log(666)
        console.log(this.emp.savePath)
        this.$post("/anapp/EmpController/addFile", this.emp, (data) => {
        })
      });
	  this.$refs.upload.value = "";
    }
  }
};
//  压缩图片
function canvasDataURL(path, obj, callback) {
  var img = new Image();
  img.src = path;
  img.onload = function() {
    var that = this;
    // 默认按比例压缩
    var w = that.width,
      h = that.height;
    var quality = 0.9;
    //生成canvas
    var canvas = document.createElement("canvas");
    canvas.width = w;
    canvas.height = h;
    var ctx = canvas.getContext("2d");
    //获取图片方向
    ctx.drawImage(img, 0, 0, w, h);
    // ctx.drawImage(that, 0, 0, w, h);
    // 图像质量
    if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
      quality = obj.quality;
    }
    // quality值越小，所绘制出的图像越模糊
    var base64 = canvas.toDataURL("image/jpeg", quality);
    // 回调函数返回base64的值
    callback(base64);
  };
}
</script>

<style lang="less" scoped>
.wide {
  width: 1000px;
  margin: 30px auto;
}

.logo {
  font-size: 26px;
  text-align: center;
}
.input {
  border: 1px solid rgb(214, 212, 212);
  width: 100%;
  height: 35px;
  padding: 0px;
  margin-bottom: 20px;
}
.textarea {
  border: 1px solid rgb(214, 212, 212);
  margin-bottom: 20px;
}
.p {
  margin-bottom: 20px;
}
.img-main {
  font-size: 12px;
  background: #f5f5f5;
  overflow: auto;
}
.img-box {
  overflow: hidden;
  position: relative;
  min-height: 162px;
  background: #fff;
  .img-thumbnail {
    width: 148px;
    height: 160px;
    border: 1px solid #ddd;
    position: relative;
    float: left;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    &:nth-of-type(3n) {
      margin-right: 0;
    }
  }
  .input-img {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}
</style>
<style lang="less">
.long-form .el-form-item__label {
  line-height: 16px;
}
</style>

